<template>
    <view>
        <view class="an-notice-box">
            <!-- <view class="an-notice-icon">

            </view> -->
            <scroll-view class="an-notice-content">
                <swiper v-if="show"
                    class="swiper"
                    :autoplay="true"
                    :interval="switchTime*1000"
                    :duration="1500"
                    :circular="true"
                    :vertical="true">
                    <swiper-item v-for="(notice, index) in noticeList"
                        :key="`notice${index}`"
                        class="an-notice-content-item"
                    >
                        <view class="swiper-item">
                            <text class="an-notice-content-item-text">
                                <text class="an-notice-content-item-text-type">{{ showType(notice) }}</text>
                                <!-- <text v-if="list.length > 1 || showSerial">{{index+1+'. '}}</text> -->
                                {{ notice.title }}
                            </text>
                        </view>
                    </swiper-item>
                </swiper>
            </scroll-view>
            <!-- <view class="an-notice-content">
				<view v-for="(text, index) in list" :key="index" v-if="number == index" class="an-notice-content-item" :style="'animation: anotice '+switchTime+'s linear;'">
					<text class="an-notice-content-item-text" :style="'color: '+color+';'">
						<text v-if="showSerial">{{index+1+'. '}}</text>
						{{text}}
					</text>
				</view>
			</view> -->
            <!-- <view class="an-notice-more"
                @click="more">
                <text>查看更多</text>
                <uni-icons type="arrowright"
                    color="#999"
                    size="12" />
            </view> -->
        </view>
    </view>
</template>

<script>
// import uniIcons from '@/components/uni-icon/uni-icon.vue'
export default {
    components: {
        // uniIcons
    },
    props: {
        color: {
            type: String,
            default() {
                return "#de8c17";
            }
        },
        bgColor: {
            type: String,
            default() {
                return "#fffbe8";
            }
        },
        switchTime: {
            type: Number,
            default() {
                return 3;
            }
        },
        messageList: {
            type: Array,
            default() {
				return [];
			}
        },
        // showSerial: {
        //     type: Boolean,
        //     default() {
		// 		return false;
		// 	}
        // }
    },
    data() {
        return {
            number: 0,
            // 循环滚动 通知公告
            noticeList: [],
            showSerial: false,
            copyText: '',
            show: '',
            dictionary: "",
        };
    },
    mounted() {
        console.log(this.noticeList.length);
        if (this.noticeList.length > 1) {
            this.showSerial = true;
        }
        this.show = true;
        /* this.number = 0;
        this.startMove(); */
    },
    computed: {
    },
    created() {
        this.dictionary = this.$store.state.dictionary;
    },
    watch: {
        // text: function () {
        //     this.show = true;
        //     if (this.text != this.copyText) {
        //         this.copyText = this.text;
        //         this.noticeList = this.text.split('|');
        //         console.log(JSON.stringify(this.noticeList))
        //         if (this.noticeList.length > 1) {
        //             this.showSerial = true;
        //         }
        //     }
        //     /* this.number = 0;
        //     this.startMove(); */
        // },
        /**
         * 消息列表数据变化
         */
        messageList: {
            handler (val) {
                let __this = this;
                if (!__this.dictionary) {
                    __this.dictionary = __this.$store.state.dictionary;
                }
                if (val && Array.isArray(val)) {
                    __this.noticeList = val;
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        /* startMove () {
          // eslint-disable-next-line
        let timer = setTimeout(() => {
            if (this.number === this.list.length-1) {
                this.number = 0;
            } else {
                this.number += 1;
            }
            this.startMove();
            }, this.switchTime*1000);
        }, */
        more() {
            this.show = false;
            this.$emit('more');
        },
        showType (notice) {
            let __this = this;
            if (
                notice.type
                && __this.dictionary
                && __this.dictionary.jftzgglx
                && __this.dictionary.jftzgglx.length > 0
            ) {
                for (let i = 0; i < __this.dictionary.jftzgglx.length; i ++) {
                    let dic = __this.dictionary.jftzgglx[i];
                    if (dic.value == notice.type) {
                        return dic.name;
                    }
                }
            }
            return "";
        },
    }
}
</script>

<style scoped>
.swiper {
    height: 60upx !important;
}

.an-notice-box {
    width: 100%;
    height: 60upx;
    padding: 0 10upx;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.an-notice-icon {
    width: 10rpx;
    height: 10rpx;
    position: relative;
    background-color: #4ba4fe;
    border-radius: 10rpx;
    margin-right: 20rpx;
}
.an-notice-content {
    /* width: calc(100% - 220upx); */
    position: relative;
    font-size: 22rpx;
}
.an-notice-content-item {
    width: 100%;
    height: 60upx;
    text-align: left;
    line-height: 60upx;
}
.an-notice-content-item-text {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #4e5868;
}
.an-notice-content-item-text-type {
    background-color: #6bb8fd;
    color: #fff;
    padding: 6rpx 20rpx;
    margin-right: 16rpx;
    border-radius: 6rpx;
}
.an-notice-more {
    width: 130upx;
    height: 60upx;
    font-size: 22rpx;
    line-height: 60upx;
    text-align: right;
    color: #999;
}

@keyframes anotice {
    0% {
        transform: translateY(100%);
    }
    30% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
</style>
